import React from "react";
import { connect } from "react-redux";
import {
  increase,
  decrease,
  asyncDecrease,
  asyncIncrease,
} from "../store/actions/counter";
import makeStore from "../store";
function Page({ n, increase, decrease, asyncDecrease, asyncIncrease }) {
  return (
    <div>
      <h1>{n}</h1>
      <p>
        <button onClick={increase}>+1</button>
        <button onClick={decrease}>-1</button>
        <button onClick={asyncDecrease}>延迟1s -1</button>
        <button onClick={asyncIncrease}>延迟1s +1</button>
      </p>
    </div>
  );
}

export default connect(
  (store) => ({ n: store.counter }),
  (dispatch) => {
    return {
      increase: () => dispatch(increase()),
      decrease: () => dispatch(decrease()),
      asyncDecrease: () => dispatch(asyncDecrease()),
      asyncIncrease: () => dispatch(asyncIncrease()),
    };
  }
)(Page);

export async function getServerSideProps() {
  // 组件渲染前,拿到仓库,注入数据
  // 新建一个仓库
  const store = makeStore();
  await store.dispatch(asyncIncrease());
  // 不能把仓库传递过去，要求是序列化的数据
  return {
    props: {
      _initialState: store.getState(),
    },
  };
}
